import { Component, OnInit } from '@angular/core';
import {TableUtil} from "../../../../util/table-util";

declare var $;
declare var moment;
declare var echarts;
declare var BMap;

@Component({
  selector: 'app-zzitem',
  templateUrl: './zzitem.component.html',
  styleUrls: ['./zzitem.component.css']
})
export class ZzitemComponent implements OnInit {
  maxHeight : string = "";
  map;
  zyqData;
  eqqData;
  gcqData;
  jsqData;
  hjqData;
  gxqData;
  zdxqData;
  jkqData;
  htmlId;
  htmlData;
  table;
  constructor(
    private tableUtil:TableUtil,
  ) { }

  ngOnInit() {
    this.initData();
    this.initMapHeight();
    this.initMap();
    this.initChart();
    this.initLabel();
    this.initTableData();
  }
  initMapHeight = ()=>{
    let height = window.innerHeight;
    $(".one-notbreadcrumb").css("height",height-51+"px");
    this.maxHeight = height-380+"px";
  };

  /**
   * 初始化地图
   */
  initMap (){
    $("#map").css("height",window.innerHeight-51+"px");
    this.map = new BMap.Map("map",{enableMapClick:false,minZoom:5,maxZoom:18});
    let centerPoint = new BMap.Point(113.65,34.76);  // 创建点坐标
    this.map.centerAndZoom(centerPoint, 12);
    //地图样式
    let mapStyle = [
      {
        "featureType": "poi",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      },
      {"featureType" : "land",
        "elementType": "geometry",
        "stylers": {
          "color": "#24252b"
        }
      },
      {"featureType": "road",
        "elementType": "geometry",
        "stylers": {
          "color": "#171717",
          "hue": "#171717",
          "weight": "0.1",
          "lightness": -6,
          "saturation": -15
        }
      },
      {
        "featureType": "highway",
        "elementType": "labels.icon",
        "stylers": {
          "visibility": "off"
        }
      },
      {"featureType": "building",
        "elementType": "geometry",
        "stylers": {
          "color": "#2a2b2e"
        }
      },
      {"featureType": "highway",
        "elementType": "all",
        "stylers": {
          "lightness": -42,
          "saturation": -91
        }
      },
      {"featureType": "arterial",
        "elementType": "geometry",
        "stylers": {
          "lightness": -77,
          "saturation": -94
        }
      },
      {"featureType": "green",
        "elementType": "geometry",
        "stylers": {
          "color": "#1b1b1b"
        }
      },
      {"featureType": "subway",
        "elementType": "geometry.stroke",
        "stylers": {
          "color": "#181818"
        }
      },
      {"featureType": "railway",
        "elementType": "geometry",
        "stylers": {
          "lightness": -52
        }
      },
      {"featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": {
          "color": "#313131"
        }
      },
      {"featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": {
          "color": "#8b8787"
        }
      },
      {"featureType": "manmade",
        "elementType": "geometry",
        "stylers": {
          "color": "#1b1b1b"
        }
      },
      {"featureType": "local",
        "elementType": "geometry",
        "stylers": {
          "lightness": -75,
          "saturation": -91
        }
      },
      {"featureType": "subway",
        "elementType": "geometry",
        "stylers": {
          "lightness": -65
        }
      },
      {"featureType": "railway",
        "elementType": "all",
        "stylers": {
          "lightness": -40
        }
      },
      {"featureType": "road",
        "elementType": "geometry",
        "stylers": {
          "color": "#171717",
          "hue": "#041e3b",
          "weight": "1.0",
          "lightness": -12,
          "saturation": -15
        }
      },
      {"featureType": "water",
        "elementType": "geometry",
        "stylers": {
          "color": "#041e3b",
          "hue": "#041e3b",
          "weight": "0.1",
          "lightness": -12,
          "saturation": -15
        }
      }
    ];
    this.map.setMapStyle({styleJson:mapStyle});
    this.map.enableScrollWheelZoom();
    this.map.enableDragging();
  };

//联网表格
 initChart(){
    let netChartObj = {
      "total":195,
      "inline":180,
      "outline":15
    };
   this.networkChartData(netChartObj)


   let accessChartObj = {
     "name":"获取率",
     "regionName":["金水区","中原区","高新区","二七区","经开区","管城区","惠济区","郑东新区"],
     "value":[76,78,76,78,76,80,78,74]
   }
   this.accessChartData(accessChartObj);


  let polluteChartObj = {
    "name":["PM2.5","PM10","O3","NO2","SO2","CO"],
    "time":[8,10,12,14,16,18,20,22,0,2,4,6],
    "data":[
      [58,62,73,84,92,85,51,42,65,51,31,36],
      [166,172,185,196,220,215,230,180,150,175,186,168],
      [21,32,41,51,62,132,168,184,192,221,240,98],
      [34,54,68,47,52,41,89,52,62,78,85,41],
      [2,5,8,9,4,6,3,18,5,7,12,6],
      [1.201,1.112,1.345,0.985,0.876,1.698,1.324,1.751,1.698,1.548,0.647,0.934]
    ]
  }
   this.polluteChartData(polluteChartObj);


 };

//各区表格数据
 initData(){
   this.zyqData = [
     {
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"汝河办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
      },
     {
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"三官庙办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },
     {
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"秦岭路街道办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },
   ];
   this.eqqData = [ ];
   this.gcqData = [
     {
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"金岱工业园",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     }];
   this.jsqData = [
     {
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"刘寨街道办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     }
   ];
   this.hjqData = [
     {
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"新城街道办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"大河路街道办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     }
   ];
   this.gxqData = [
     {
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"双桥办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"沟赵办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"石佛中学",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
   },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"石佛办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     }
   ];
   this.zdxqData = [
     {
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"八十八中",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"博学路办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"龙翔小学",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
     "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"祭城路办事处",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
   },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"榆林社区",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"七里河",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"龙岗小学",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     },{
       "time":moment().format("YYYY-MM-DD HH")+":00:00",
       "siteName":"莆田乡",
       "siteState":"无数据",
       "aqi":0,
       "pm25":0,
       "pm10":0,
       "so2":0,
       "no2":0,
       "co":0,
       "o3":0
     }
   ];
   this.jkqData = [ ];
 };

//各区位置
 initLabel(){
   let posObj = [
     {
     "lon":113.6,
     "lat":34.75,
     "name":"中原区"
   },
     {
       "lon":113.65,
       "lat":34.73,
       "name":"二七区"
     },
     {
       "lon":113.67,
       "lat":34.75,
       "name":"管城回族区"
     },
     {
       "lon":113.65,
       "lat":34.78,
       "name":"金水区"
     },
     {
       "lon":113.6,
       "lat":34.87,
       "name":"惠济区"
     },
     {
       "lon":113.5739143229,
       "lat":34.8178498753,
       "name":"高新区"
     },
     {
       "lon":113.7651326916,
       "lat":34.7809751725,
       "name":"郑东新区"
     },
     {
       "lon":113.7490643912,
       "lat":34.7270118480,
       "name":"经开区"
     },
   ];
   $.each(posObj,function (i,list) {
     this.setLabel(list.lon,list.lat,list.name)
   }.bind(this))

 };

//标签
setLabel(lon,lat,words){

  var point = new BMap.Point(lon,lat);
  var opts = {
  position : point     // 指定文本标注所在的地理位置
}
//信息窗口内容
  var sContent =this.infoDetailHtml(words);
  words =this.infoLength(words)==" "?words: words+' <span class="user_badge">'+this.infoLength(words)+'</span>';
  var label = new BMap.Label(words, opts);  // 创建文本标注对象
  label.setStyle({
     maxWidth:"none",
     display:"block",
     color : "white",
     background:"rgb(60,130,76)",
     fontSize : "12px",
     padding:"8px 12px",
     border :"none",
     borderRadius:"5px",
     fontFamily:"微软雅黑",
     cursor:"pointer"
   });
  this.map.addOverlay(label);

  var option = {
    offset:new BMap.Size(30,0)
  }
  //信息窗口
  var infoWindow = new BMap.InfoWindow(sContent,option);  // 创建信息窗口对象
  label.addEventListener("click", function(){

    this.map.openInfoWindow(infoWindow,point);
    this.setContent(words.split(" ")[0]);
  });
  infoWindow.addEventListener("open",function(open){
    $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-left").removeClass("glyphicon-menu-right");
    $(".user_site_detail").animate({"width":"0px"});
    $(".user_site_content_arrow_detail").addClass("glyphicon-chevron-left").removeClass("glyphicon-chevron-right");
    $(".user_site_content").animate({"left":"0px"});
    this.regionClick();
  }.bind(this));
};

//信息窗内容
infoDetailHtml(regionName){
  let html = '<div style="height: 170px;overflow: auto"><div style="overflow: hidden;margin-bottom: 5px"><span style="display: block;float:left;padding: 7px 3px;margin: 3px 5px 0 0;background: rgb(64,134,79)"></span><span style="display: block;float: left;">异常站点</span></div><div><ul>';
let htmlLi = '';
  if(regionName == "中原区"){
    this.htmlData = this.zyqData;
    this.htmlId = "zyq";
  }else if(regionName == "二七区"){
    this.htmlData = this.eqqData;
    this.htmlId = "eqq";
  }else if(regionName == "管城回族区"){
    this.htmlData = this.gcqData;
    this.htmlId = "gcq";
  }else if(regionName == "金水区"){
    this.htmlData = this.jsqData;
    this.htmlId = "jsq";
  }else if(regionName == "惠济区"){
    this.htmlData = this.hjqData;
    this.htmlId = "hjq";
  }else if(regionName == "高新区"){
    this.htmlData = this.gxqData;
    this.htmlId = "gxq";
  }else if(regionName == "郑东新区"){
    this.htmlData = this.zdxqData;
    this.htmlId = "zdxq";
  }else if(regionName == "经开区"){
    this.htmlData = this.jkqData;
    this.htmlId = "jkq";
  };
  if(this.htmlData ==""){
    htmlLi = "暂无数据";
  }else{
    $.each(this.htmlData,function (i,list) {
      htmlLi+='<li><p>'+list.siteName+' ('+list.siteState+')</p><p>发布时间：'+list.time+'</p></li>';
    })
  }

  html +=htmlLi+'</ul><a id='+this.htmlId+' style="color:rgb(71,134,93);cursor:pointer;">查看详情</a></div></div>';

  return html;
}

//徽章number
  infoLength(regionName){
    if(regionName == "中原区"){
      return this.zyqData.length;
    }else if(regionName == "二七区"){
      return this.eqqData.length;
    }else if(regionName == "管城回族区"){
      return this.gcqData.length;
    }else if(regionName == "金水区"){
      return this.jsqData.length;
    }else if(regionName == "惠济区"){
      return this.hjqData.length;
    }else if(regionName == "高新区"){
      return this.gxqData.length;
    }else if(regionName == "郑东新区"){
      return this.zdxqData.length;
    }else if(regionName == "经开区"){
      return this.jkqData.length;
    }
  };

//查看详情
  regionClick() {
    $("#zyq").click(function () {
      $(".user_site_detail").animate({"width": "400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
      this.tabledata(this.zyqData);
    }.bind(this));
    $("#eqq").click(function () {
      $(".user_site_detail").animate({"width": "400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
      this.tabledata(this.eqqData);
    }.bind(this));
    $("#gcq").click(function () {
      $(".user_site_detail").animate({"width": "400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
      this.tabledata(this.gcqData);
    }.bind(this));
    $("#jsq").click(function () {
      $(".user_site_detail").animate({"width": "400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
      this.tabledata(this.jsqData);
    }.bind(this));
    $("#hjq").click(function () {
      $(".user_site_detail").animate({"width": "400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
      this.tabledata(this.hjqData);
    }.bind(this));
    $("#gxq").click(function () {
      $(".user_site_detail").animate({"width": "400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
      this.tabledata(this.gxqData);
    }.bind(this));
    $("#zdxq").click(function () {
      $(".user_site_detail").animate({"width": "400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
      this.tabledata(this.zdxqData);
    }.bind(this));
    $("#jkq").click(function () {
      $(".user_site_detail").animate({"width": "400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
      this.tabledata(this.jkqData);
    }.bind(this));
  }

//点击事件
initTableStyle(){
  $(".user_site_detail").css("height",$("#map").height());
  $(".user_site_arrow").bind('click',function () {
    if($(".user_site_detail").css("width")=="0px"){
      $(".user_site_detail").animate({"width":"400px"})
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-right").removeClass("glyphicon-menu-left");
    }else{
      $(".user_site_detail").animate({"width":"0px"});
      $(".user_site_arrow").find(".glyphicon").addClass("glyphicon-menu-left").removeClass("glyphicon-menu-right");
    }
  })
  $(".user_site_content_arrow_detail").click(function () {
    if($(".user_site_content").css("left")=="0px"){
      $(".user_site_content_arrow_detail").addClass("glyphicon-chevron-right").removeClass("glyphicon-chevron-left");
      $(".user_site_content").animate({"left":"-250px"});
    }else{
      $(".user_site_content_arrow_detail").addClass("glyphicon-chevron-left").removeClass("glyphicon-chevron-right");
      $(".user_site_content").animate({"left":"0px"});
    }
  })

}

//表格数据
initTableData(){
  let tableObj = [
    {
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"汝河办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },
    {
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"三官庙办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },
    {
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"秦岭路街道办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },
    {
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"金岱工业园",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },
    {
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"刘寨街道办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },
    {
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"新城街道办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"大河路街道办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },
    {
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"双桥办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"沟赵办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"石佛中学",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"石佛办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },
    {
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"八十八中",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"博学路办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"龙翔小学",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"祭城路办事处",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"榆林社区",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"七里河",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"龙岗小学",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    },{
      "time":moment().format("YYYY-MM-DD HH")+":00:00",
      "siteName":"莆田乡",
      "siteState":"无数据",
      "aqi":0,
      "pm25":0,
      "pm10":0,
      "so2":0,
      "no2":0,
      "co":0,
      "o3":0
    }
  ]
  this.tabledata(tableObj);
};

//表格
tabledata(data){
    $(".user_site_content").html('<div class="user_site_content_arrow"><span class="glyphicon glyphicon-chevron-left user_site_content_arrow_detail" style="margin: 10px;font-size: 24px;font-weight:200; "></span></div><div id="siteTable" style="width: 620px;"></div>');
    this.table=this.tableUtil.load("siteTable",{
      columns: [
        {
          field:'siteName',
          title:'站点名称',
          align:'left',
          width:100
        },
        {
          field:'siteState',
          title:'异常情况',
          align:'left',
          width:100
        },
        {
          field:'aqi',
          title:'AQI',
          align:'left',
          width:60
        },
        {
          field:'pm25',
          title:'PM2.5',
          align:'left',
          width:60
        },
        {
          field:'pm10',
          title:'PM10',
          align:'left',
          width:60
        },
        {
          field:'so2',
          title:'SO<sub>2</sub>',
          align:'left',
          width:60
        },
        {
          field:'no2',
          title:'NO<sub>2</sub>',
          align:'left',
          width:60
        },
        {
          field:'co',
          title:'CO',
          align:'left',
          width:60
        },
        {
          field:'o3',
          title:'O<sub>3</sub>',
          align:'left',
          width:60
        },
      ],
      data:data,
      striped:true,
      pagination :true,
      paginationLoop: false,
      paginationPreText : "上一页",
      paginationNextText :"下一页",
      undefinedText : " ",
      height:500,
      pageSize:15,
      pageList :[10,15,20]
    });
    $("#siteTable").css("padding",0);
    this.initTableStyle();
}

//联网状态chart
networkChartData(data){
    let netChart = echarts.init(document.getElementById('networkChart'));
    let netOption = {
      color:["rgb(80,227,194)","rgb(210,104,117)","rgb(255,255,255)"],
      tooltip : {
        trigger: 'item',
        formatter: "{b} : {c} 个"
      },
      title:{
        z:50,
        text:data.total,
        textStyle: {
          color:"rgb(80,227,194)",
          fontWeight: 'normal',
          fontSize: 22
        },
        subtext: '联网',
        subtextStyle:{
          color:"rgb(80,227,194)"
        },
        x: 'center',
        y: 'center'
      },
      legend: {
        bottom:0,
        textStyle:{
            color:"#fff"
        },
        data:['在线','离线','联网']
      },
      series:[
        {
          type:"pie",
          radius : '75%',
          center: ['50%', '50%'],
          z:20,
          labelLine: {
            normal: {
              show: false
            }
          },
          label: {
            normal: {
              show: false
            }
          },
          data:[
            {value:data.inline, name:'在线'},
            {value:data.outline, name:'离线',selected:true}
          ]
        },
        {
          type:"pie",
          radius : '50%',
          center: ['50%', '50%'],
          z:30,
          labelLine: {
            normal: {
              show: false
            }
          },
          label: {
            normal: {
              show: false
            }
          },
          data:[
            {value:data.total, name:'联网'},
          ]
        }
      ]
    };
    netChart.setOption(netOption, true);
  }

// 24小时数据获取率
accessChartData(data){
    let accessChart = echarts.init(document.getElementById('accessChart'));
    let accessOption = {
      color:["rgb(72,171,93)"],
      legend:{
        show:true,
        data:[{
          name:data.name,
          textStyle: {
            color: '#fff'
          }
        }]
      },
      xAxis : [
        {
          type : 'category',
          axisLabel:{
            textStyle:{
              color:"#fff"
            },
            interval:0
          },
          data : data.regionName,
        }
      ],
      yAxis : [
        {
          type : 'value',
          name:'%',
          min:0,
          max:100,
          splitLine:{
            show:false
          },
          axisLabel:{
            textStyle:{
              color:"#fff"
            }
          }
        }
      ],
      series:{
        name:data.name,
        type:"bar",
        label: {
          normal: {
            show: true,
            position:[0,-20],
            textStyle:{
              color:"#fff"
            }
          }
        },
        barWidth:10,
        data:data.value
      }
    };
    accessChart.setOption(accessOption);
  }

//24小时各污染物浓度变化
polluteChartData(data){
    let colorList = ["rgb(74,144,226)","rgb(233,134,227)","rgb(184,233,134)","rgb(78,59,148)","rgb(5,117,103)","rgb(233,167,134)"];
    let polluteChart = echarts.init(document.getElementById('polluteChart'));
    let polluteOption = {
      color:colorList,
      tooltip : {
        trigger: 'axis'
      },
      legend:{
        data:data.name,
        textStyle:{
          color:"#fff"
        }
      },
      xAxis : [
        {
          type : 'category',
          axisLabel:{
            textStyle:{
              color:"#fff"
            },
            interval:0
          },
          data : data.time,
        }
      ],
      yAxis : [
        {
          type : 'value',
          splitLine:{
            show:false
          },
          axisLabel:{
            textStyle:{
              color:"#fff"
            }
          }
        },
        {
          type : 'value',
          splitLine:{
            show:false
          },
          axisLabel:{
            textStyle:{
              color:"#fff"
            }
          }
        }
      ],
      series:[]
    }
    $.each(data.data,function (i,list) {
      if(data.name[i] == "CO"){
        polluteOption.series.push({
          name:data.name[i],
          type:'line',
          smooth:true,
          yAxisIndex: 1,
          data:list
        });
      }else{
        polluteOption.series.push({
          name:data.name[i],
          type:'line',
          smooth:true,
          yAxisIndex: 0,
          data:list
        });
      }

    })
    polluteChart.setOption(polluteOption, true);

  }

}
